<template>
  <div>
<!--  主屏-content-默认内容展示  -->
    <h1> {{ screenWidth }} × {{ screenHeight }} </h1>
    <BarChart  style="width: 100%" ref="barChartRef"></BarChart>
    <LineChart style="width: 100%" ref="lineChartRef"></LineChart>
    <PieChart style="width: 100%" ref="pieChartRef"></PieChart>
    <a-empty/>
  </div>
</template>

<script>
function sleepRefresh(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

import BarChart from "@/components/chart/BarChart";
import LineChart from "@/components/chart/LineChart";
import PieChart from "@/components/chart/PieChart";
export default {
  name: "DefaultHome",
  components: {
    BarChart,LineChart,PieChart
  },
  data() {
    return {
      screenWidth: '',
      screenHeight: ''
    }
  },
  computed: {},
  created() {

  },
  mounted() {


    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
        this.refreshChart();
      })();
    };


    console.log(this.$route);
    let routeNameTarget = this.$route.name;
    console.log(routeNameTarget);

    if (routeNameTarget === 'defaultHome'){
      console.log('默认主屏-content-默认内容展示');
      this.doRefresh();
    }
  },
  updated() {

  },
  methods: {
    refreshChart(){
      console.log('刷新chart')
      this.$refs.lineChartRef.reSizeLineChart();
      this.$refs.barChartRef.reSizeBarChart();
      this.$refs.pieChartRef.reSizePieChart();
      // this.$forceUpdate();
    },
    async  doRefresh(){
      //线程睡眠0.2秒后refreshChart
      await sleepRefresh(200);
      this.refreshChart();
    },
  }
}
</script>

<style scoped>

</style>
